<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="标题：" style="width: 380px">
        <el-input
          v-model="formInline.paymentTitle"
          placeholder="请输入标题"
          clearable
        />
      </el-form-item>
      <el-form-item label="申请日期：">
        <el-date-picker
          v-model="formInline.paymentData"
          type="date"
          placeholder="请选择日期"
          clearable
        />
      </el-form-item>
      <el-form-item label="审批状态：">
        <el-select
          v-model="formInline.paymentState"
          placeholder="请选择状态"
          clearable
          style="width: 180px"
        >
          <!--  待审批=1,已通过,已拒绝,待提交-->
          <el-option label="待审批" value="1" />
          <el-option label="审批通过" value="2" />
          <el-option label="审批拒绝" value="3" />
        </el-select>
      </el-form-item>
      <br />
      <el-form-item label="审批人：" style="width: 380px">
        <el-input
          v-model="formInline.paymentName"
          placeholder="请输入审批人"
          clearable
        />
      </el-form-item>
      <el-form-item label="付款方式：">
        <el-select
          v-model="formInline.paymentManner"
          placeholder="请选择状态"
          clearable
          style="width: 180px"
        >
          <!--  待审批=1,已通过,已拒绝,待提交-->
          <el-option label="微信支付" value="1" />
          <el-option label="支付宝支付" value="2" />
          <el-option label="银联支付" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getPaymentsList">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!-- 审批状态 -->
  <el-radio-group
    v-model="formInline.paymentState"
    size="large"
    @change="getPaymentsList"
  >
    <el-radio-button label="全部" value="" style="width: 150px" />
    <el-radio-button label="待审批" value="1" style="width: 150px" />
    <el-radio-button label="已审批" value="2" /> </el-radio-group
  ><br />

  <el-table :data="filterTableData" style="width: 100%">
    <el-table-column label="标题" prop="paymentTitle" />
    <el-table-column label="用途描述" prop="paymentDescription" />
    <el-table-column label="付款金额" prop="paymentMoneys" />
    <el-table-column label="付款方式" prop="paymentManner">
      <template v-slot="scope">
        <!--  微信=1,支付宝=2,银行卡=3-->
        <el-tag v-if="scope.row.paymentManner === 1" type="success"
          >微信支付</el-tag
        >
        <el-tag v-if="scope.row.paymentManner === 2" type="primary"
          >支付宝支付</el-tag
        >
        <el-tag v-if="scope.row.paymentManner === 3" type="danger"
          >银联支付</el-tag
        >
      </template>
    </el-table-column>
    <el-table-column label="支付对象" prop="paymentWhoPay" />
    <el-table-column label="开户行" prop="paymentBank" />
    <el-table-column label="银行账号" prop="paymentAccount" />
    <el-table-column label="申请人" prop="paymentApplicant" />
    <el-table-column label="付款日期" prop="paymentData">
      <template v-slot="fk">
        {{ fk.row.paymentData.substring(0, 10) }}
      </template>
    </el-table-column>
    <el-table-column label="备注" prop="paymentRemark" />
    <el-table-column label="创建时间" prop="createDates"/>
    <el-table-column label="审批状态" prop="paymentState">
      <template v-slot="scope">
        <!--  待审批=1,已通过,已拒绝,待提交-->
        <el-tag v-if="scope.row.paymentState === 1" type="warning"
          >待审批</el-tag
        >
        <el-tag v-if="scope.row.paymentState === 2" type="warning"
          >审批通过</el-tag
        >
        <el-tag v-if="scope.row.paymentState === 3" type="success"
          >审批拒绝</el-tag
        >
      </template>
    </el-table-column>
    <el-table-column label="审批人" prop="paymentName" />
    <el-table-column align="right">
      <template #default="scope">
        <el-button
          size="small"
          type="primary"
          @click="handleEdit(scope.$index, scope.row)"
          >查看</el-button
        >
        <el-button size="small" type="primary" @click="handlePass(scope.$index, scope.row)" v-if="scope.row.paymentState==1" >通过</el-button>

        <el-button size="small" type="primary" @click="handlePass(scope.$index, scope.row)" v-if="scope.row.paymentState==2" disabled>通过</el-button>

        <el-button size="small" type="primary" @click="handlePass(scope.$index, scope.row)" v-if="scope.row.paymentState==3" disabled>通过</el-button>

        <el-button size="small" type="primary" @click="handleNotPass(scope.$index, scope.row)" v-if="scope.row.paymentState==1" >拒绝</el-button>

       <el-button size="small" type="primary" @click="handleNotPass(scope.$index, scope.row)" v-if="scope.row.paymentState==2" disabled>拒绝</el-button>

        <el-button size="small" type="primary" @click="handleNotPass(scope.$index, scope.row)" v-if="scope.row.paymentState==3" disabled>拒绝</el-button>
      </template>
    </el-table-column>
  </el-table>
  <table>
    <tr>
      <td>
        <el-pagination
          v-model:current-page="fen.pageIndex"
          v-model:page-size="fen.pageSize"
          :page-sizes="[3, 5, 8, 10]"
          :background="true"
          layout="total, slot"
          prev-text="上一页"
          next-text="下一页"
          :total="fen.listCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          每页显示{{ fen.pageSize }}条，当前第{{ fen.pageIndex }}/{{
            fen.pageCount
          }}页
        </el-pagination>
      </td>
      <td>
        <el-pagination
          v-model:current-page="fen.pageIndex"
          v-model:page-size="fen.pageSize"
          :page-sizes="[3, 5, 8, 10]"
          :background="true"
          layout=" slot,prev, pager, next"
          prev-text="上一页"
          next-text="下一页"
          :total="fen.listCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @hide-on-single-page="fen.pageIndex = 1"
        >
          <el-button
            type="primary"
            :disabled="fen.pageIndex == 1"
            size="small"
            @click="handleCurrentChange(1)"
            >首页</el-button
          >
        </el-pagination>
      </td>
      <td>
        <el-pagination
          v-model:current-page="fen.pageIndex"
          v-model:page-size="fen.pageSize"
          :page-sizes="[3, 5, 8, 10]"
          :background="true"
          layout="slot, sizes, jumper"
          prev-text="上一页"
          next-text="下一页"
          :total="fen.listCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @hide-on-single-page="fen.pageIndex = fen.pageCount"
        >
          <el-button
            type="primary"
            :disabled="fen.pageIndex == fen.pageCount"
            size="small"
            @click="handleCurrentChange(fen.pageCount)"
            >尾页</el-button
          >
        </el-pagination>
      </td>
    </tr>
  </table>
</template>
<script setup lang="ts">
//登录使用localStorage登录，接收登录传过来的用户的名称
const userName = localStorage.getItem("username");
const password = localStorage.getItem("password");

console.log(userName, password);

import { ref, reactive, inject, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import http from "@/Http";
import axios from "axios";
const router = useRouter();
import { Plus } from "@element-plus/icons-vue";
const route = useRoute();
//生命周期函数钩
onMounted(function () {
  getPaymentsList();
});
//查询条件字段
const formInline = reactive({
  paymentTitle: "",
  paymentData: "",
  paymentState: "",
  paymentName: "",
  paymentManner: "",
});
//分页条件
const fen = ref({
  pageIndex: 1,
  pageSize: 3,
  pageCount: 0,
  listCount: 0,
});
//显示字段
const filterTableData = ref([]);
//显示方法
const getPaymentsList = () => {
  axios
    .get("Settlementread/api/Paymentss/GetApprovalPayment", {
      params: {
        pageIndex: fen.value.pageIndex,
        pageSize: fen.value.pageSize,
        paymentTitle: formInline.paymentTitle,
        paymentData: formInline.paymentData,
        paymentState: formInline.paymentState || 0,
        paymentName: formInline.paymentName,
        paymentManner: formInline.paymentManner || 0,
      },
    })
    .then((res) => {
      filterTableData.value = res.data.data.pageList;
      fen.value.pageCount = res.data.data.pageCount;
      fen.value.listCount = res.data.data.listCount;
      console.log(res.data.data);
    });
};
//分页显示
const handleSizeChange = (val: number) => {
  //console.log(`${val} items per page`)
  fen.value.pageSize = val;
  getPaymentsList();
};
const handleCurrentChange = (val: number) => {
  fen.value.pageIndex = val;
  getPaymentsList();
};
//查看
const handleEdit = (index: number, row: any) => {
  if(row.paymentState==1){
        router.push({
            name: "PaymentApprovalsZhuanPi",
            query: {
              paymentId: row.paymentId,
              paymentApplicant:row.paymentApplicant
            }
        })
  }
  else if (row.paymentState == 2 || row.paymentState == 3) {
        router.push({
            name: "PaymentApprovalsShenPiGuo",
            query: {
                paymentId: row.paymentId,
                paymentState:row.paymentState
            }
        })
    }
};
//审批通过
const handlePass = (index: number, row: any) => {
  axios
    .post("Settlementwrite/api/Payments/ApprovalPass", {
      paymentId: row.paymentId,
    })
    .then((res) => {
      if (res.data.data > 0) {
        ElMessage.success("审批通过");
        getPaymentsList();
      }
    });
};
//审批不通过
const handleNotPass = (index: number, row: any) => {
  axios
    .post("Settlementwrite/api/Payments/ApprovalNotPassed", {
      paymentId: row.paymentId,
    })
    .then((res) => {
      if (res.data.data > 0) {
        ElMessage.success("审批拒绝成功");
        getPaymentsList();
      }
    });
};
</script>
<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
<style>
select {
  width: 200px;
  height: 25px;
  line-height: 25px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>

<style>
.page {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  margin-bottom: 20px;
}

.demo-ruleForm {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input,
.el-select,
.el-date-editor {
  width: 100%;
}

.el-button {
  margin-right: 10px;
}
</style>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>